<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item>
        <a-input
          size="large"
          type="text"
          placeholder="账户"
          v-decorator="[
                'username',
                {rules: [{ required: true, message: '请输入帐户名' } ], validateTrigger: 'change'}
              ]"
        >
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          size="large"
          type="password"
          autocomplete="false"
          placeholder="密码"
          v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
              ]"
        >
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-item>
      <a-form-item style="margin-top:24px">
        <a-button
          size="large"
          type="primary"
          htmlType="submit"
          class="login-button"
          :loading="disableLoginBtn"
          :disabled="disableLoginBtn"
        >确定
        </a-button>
      </a-form-item>
    </a-form>

  </div>
</template>

<script>
  import md5 from 'md5'
  import {mapActions} from 'vuex'
  import {timeFix, getRedirectURI} from '@/utils/util'
  import {LOGIN_SUCCESS_PAGE} from '@/config/constants'

  export default {
    data() {
      return {
        form: this.$form.createForm(this),
        disableLoginBtn: false,
      }
    },
    created() {

    },
    methods: {

      ...mapActions(['login', 'getInfo']),

      handleSubmit(e) {
        e.preventDefault()
        this.disableLoginBtn = true
        this.form.validateFields(['username', 'password'], {force: true}, (err, values) => {
          if (!err) {
            const data = {
              username: values.username,
              password: md5(values.password)
            }
            this.login(data)
              .then(res => this.requestFinish(res))
              .catch(err => this.requestFailed(err))
              .finally(() => this.disableLoginBtn = false)
          } else {
            setTimeout(() => {
              this.disableLoginBtn = false
            }, 600)
          }
        })
      },

      requestFinish(resp) {
        console.log('requestFinish, resp: %o', JSON.stringify(resp))
        if (!resp.succ) {
          this.$notification.warn({
            message: '登录出现问题',
            description: resp.msg
          })
          return false
        }
        this.getInfo().then(() => {
          // 跳转到首页
          const path = decodeURIComponent(getRedirectURI() || LOGIN_SUCCESS_PAGE)
          this.$router.push({path})
          setTimeout(() => {
            this.$notification.success({
              message: '欢迎',
              description: `${timeFix()}，欢迎回来`
            })
          }, 1000)
        }).catch((err) => {
          this.$notification.error({
            message: '错误',
            description: '登录后获取用户信息失败:'+err.message
          })
          console.error(err)
        })
      },
      requestFailed(err) {
        this.$notification.error({
          message: '错误',
          description: err.message,
          duration: 4
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-layout-login {
    label {
      font-size: 14px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
      height: 40px;
    }

    .forge-password {
      font-size: 14px;
    }

    button.login-button {
      padding: 0 15px;
      font-size: 16px;
      height: 40px;
      width: 100%;
    }

    .user-login-other {
      text-align: left;
      margin-top: 24px;
      line-height: 22px;

      .item-icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }

      .register {
        float: right;
      }
    }
  }
</style>
